<template>
  <div>
    <selectBody :queryConfig="queryConfig" @clickQuery="query">
      <template v-slot:select>
        <el-form-item label="订单状态">
          <el-select
            clearable
            style="width: 120px"
            v-model="orderStatus"
            placeholder="请选择"
          >
            <el-option
              v-for="(val, key) in statusList"
              :key="key"
              :label="val"
              :value="key"
            />
          </el-select>
        </el-form-item>
      </template>
    </selectBody>

    <tableBody
      ref="table"
      :tableConfig="tableConfig"
      :queryApi="queryApi"
      :isOperate="true"
      :operateWidth="100"
    >
      <template v-slot:operate="slotProps">
        <div>
          <template v-if="userInfo.type == 1">
            <div
              class="click"
              v-if="slotProps.scope.row.orderstatus == 1"
              @click="flow(slotProps.scope.row.orderid, 2)"
            >
              审核通过
            </div>
            <div
              class="click"
              v-if="slotProps.scope.row.orderstatus == 2"
              @click="flow(slotProps.scope.row.orderid, 3)"
            >
              发货
            </div>
            <div class="click" @click="handleUpd(slotProps.scope.row)">
              修改
            </div>
            <div class="click" @click="handleDel(slotProps.scope.row)">
              删除
            </div>
          </template>

          <template v-if="userInfo.type == 2">
            <div
              class="click"
              v-if="slotProps.scope.row.orderstatus == 3"
              @click="flow(slotProps.scope.row.orderid, 4)"
            >
              确认收货
            </div>
          </template>
          <div class="click" @click="handleShow(slotProps.scope.row)">查看</div>
        </div>
      </template>
    </tableBody>

    <el-dialog v-model="showFormVisible" title="查看订单" width="800" center>
      <table class="showCon">
        <tr v-for="item in showConList" :key="item.content">
          <td class="title">
            {{ item.title }}
          </td>
          <td class="content">
            <span v-if="item.handle">
              {{ item.list[formData[item.content]] }}
            </span>
            <span v-else>
              {{ formData[item.content] }}
            </span>
          </td>
        </tr>
      </table>
      <table class="showCon details">
        <tr>
          <th colspan="4">商品列表</th>
        </tr>
        <tr>
          <th width="450px">商品</th>
          <th>单价</th>
          <th>数量</th>
          <th>金额</th>
        </tr>
        <tr v-for="(item, index) in detailsList" :key="index">
          <td class="click" @click="showGoods(item.goodsid)">
            {{ item.goodsname }}
          </td>
          <td>{{ item.goodsprice }}</td>
          <td>{{ item.goodsnum }}</td>
          <td>{{ item.goodsprice * item.goodsnum }}</td>
        </tr>
      </table>
      <el-dialog v-model="showGoodsVisible" title="查看商品" width="800" center>
        <div class="product">
          <h1>{{ goodsForm.goodsname }}</h1>
        </div>
        <div class="infos">
          <div class="thumb">
            <el-image
              style="width: 300px; height: 300px"
              :src="goodsForm.goodsimg"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="srcList"
              :initial-index="4"
              fit="cover"
            />
          </div>
          <div class="buy">
            <p>
              价格:<span class="price">￥{{ goodsForm.goodsprice }}</span>
            </p>
            <p>
              库存:<span>{{ goodsForm.goodsstock }}</span>
            </p>
            <p>
              状态:<span>{{
                goodsForm.goodsstatus == 1 ? "上架" : "下架"
              }}</span>
            </p>
            <p>
              详情:<span>{{ goodsForm.goodsdetails }}</span>
            </p>
          </div>
        </div>
      </el-dialog>
    </el-dialog>
    <el-dialog
      v-model="updFormVisible"
      :title="updFormTitle"
      width="500"
      center
    >
      <el-form size="small" :model="formData" label-width="80px">
        <el-form-item label="订单ID:">
          <el-input :readonly="true" v-model="formData.orderid" />
        </el-form-item>

        <el-form-item label="订购人姓名">
          <el-input v-model="formData.username" :readonly="true" />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select style="width: 200px" v-model="formData.orderstatus">
            <el-option label="未审核" :value="1" />
            <el-option label="已审核,未发货" :value="2" />
            <el-option label="已发货" :value="3" />
            <el-option label="已完成" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单总金额">
          <el-input v-model="formData.totalprice" />
        </el-form-item>
        <el-form-item label="下单日期" prop="birthday">
          <el-date-picker
            v-model="formData.ordertime"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="formData.details" :readonly="true" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveEdit()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import selectList from "@/utils/selectBody";
import selectBody from "@/components/selectBody.vue";
import tableList from "@/utils/tableBody";
import tableBody from "@/components/tableBody.vue";
import { onMounted, reactive, ref, computed } from "vue";
import { listByOrder } from "@/api/details";
import { getById } from "@/api/goods";
import { updStatus, delOrder, updOrder } from "@/api/order";
import { ElMessage, ElMessageBox } from "element-plus";
import { CODE } from "@/utils/StatusCode";
import { useStore } from "vuex";

const queryConfig = reactive(selectList.orderList);
const tableConfig = reactive(tableList.orderList);

const queryApi = ref("/order/pageList");
const store = useStore();

const userInfo = computed(() => {
  return store.getters.getUserInfo;
});

onMounted(() => {
  query({});
});
const table = ref(null);
const orderStatus = ref("");
function query(data: any) {
  data.userid = userInfo.value.type == 1 ? "" : userInfo.value.userid;
  data.orderstatus = orderStatus.value;
  (table as any).value.onSearch(data);
}
// 查看
const showFormVisible = ref(false);
const showGoodsVisible = ref(false);
const formData = reactive({
  orderid: 0,
  userid: 0,
  addressid: 0,
  ordertime: "",
  orderstatus: 0,
  totalprice: 0,
  remarks: "",
  username: "",
  details: "",
});
const statusList = {
  "1": "未通过审核",
  "2": "已审核未发货",
  "3": "已发货",
  "4": "已收货",
};
const showConList = [
  { title: "订单ID", content: "orderid" },
  { title: "用户姓名", content: "username" },
  { title: "下单时间", content: "ordertime" },
  { title: "总金额", content: "totalprice" },
  {
    title: "订单状态",
    content: "orderstatus",
    handle: true,
    list: {
      "1": "未通过审核",
      "2": "已审核未发货",
      "3": "已发货",
      "4": "已收货",
    },
  },
  { title: "备注", content: "remarks" },
];
interface details {
  detailsid: number;
  goodsid: number;
  orderid: number;
  goodsname: string;
  goodsprice: number;
  goodsnum: number;
}
const detailsList = ref<details[]>([]);
async function getDetailsListByOrder(orderid: number) {
  if (!orderid) return;
  const res = await listByOrder({ id: orderid });
  if (res.code == CODE.OK) {
    detailsList.value = res.data;
  }
}
function handleShow(row: any) {
  Object.keys(formData).forEach((fieId) => {
    formData[fieId] = row[fieId];
  });
  showFormVisible.value = true;
  getDetailsListByOrder(formData.orderid);
}
const goodsForm = reactive({
  goodsid: 0,
  goodsname: "",
  goodsimg: "",
  goodsprice: 0,
  goodsstock: 0,
  goodsstatus: 1,
  goodsdetails: "",
});
let srcList: string[] = [""];
async function showGoods(goodsid: number) {
  if (!goodsid) return;
  showGoodsVisible.value = true;
  const res = await getById({ goodsid: goodsid });
  if (res.code == CODE.OK) {
    Object.keys(goodsForm).forEach((fieId) => {
      goodsForm[fieId] = res.data[fieId];
    });
    srcList[0] = goodsForm.goodsimg;
  }
}
//审核流程
function flow(orderid: number, newStatus: number) {
  if (!orderid) return;
  ElMessageBox.confirm("是否进行此操作", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res = await updStatus({
        orderid: orderid,
        orderstatus: newStatus,
      });
      prompt(res);
    })
    .catch(() => {});
}
// 删除
function handleDel(row: any) {
  if (!row.orderid) return;
  ElMessageBox.confirm("是否删除此订单", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res = await delOrder({
        orderid: row.orderid,
      });
      prompt(res);
    })
    .catch(() => {});
}
//修改
const updFormVisible = ref(false);
let updFormTitle = "";
function handleUpd(row: any) {
  Object.keys(formData).forEach((fieId) => {
    formData[fieId] = row[fieId];
  });

  updFormVisible.value = true;
  updFormTitle = "修改订单";
}
// 保存
async function saveEdit() {
  const res = await updOrder(formData);
  if (res.code == CODE.OK) {
    updFormVisible.value = false;
  }
  prompt(res);
}
function prompt(res: any) {
  if (res.code == CODE.OK) {
    ElMessage({
      message: res.message,
      type: "success",
    });
    query({});
  } else {
    ElMessage({
      message: res.message,
      type: "error",
    });
  }
}
</script>

<style lang="less" scoped>
.click {
  cursor: pointer;
  color: #3a52a8;
  &:hover {
    color: #4091ff;
  }
}
.showCon {
  width: 760px;
  border-collapse: collapse;
  border-top: 2px solid #dfc9b2;
  border-bottom: 2px solid #dfc9b2;
  tr {
    height: 20px;
    line-height: 20px;
  }
  td {
    padding: 5px;
    border: 1px solid #e1e1e1;
    border-top: 1px solid #dfc9b2;
  }
  .title {
    width: 250px;
    text-align: center;
  }
  th {
    padding: 5px;
    background: #f7f4eb;
    color: #8a7152;
    border: 1px solid #dfc9b2;
  }
}
.details {
  td {
    text-align: center;
  }
}
.product {
  font-size: 18px;
  border-bottom: 1px dashed #cfcfcf;
}
.infos {
  margin-top: 10px;
  display: flex;
  .thumb {
    width: 300px;
  }
  .buy {
    width: 440px;
    line-height: 40px;
    padding-left: 10px;
    span {
      padding-left: 4px;
    }
    .price {
      color: #c00;
      font-weight: bold;
      font-size: 24px;
    }
  }
}
</style>
